<div class="white-bg padding-lg padding-top border-radius">
    <div class="flex justify-between">
        <div class="text-title">
            人员信息
        </div>
        <div>
            <button type="button" class="btn btn-white btn-sm" style="margin-left:10px"  v-on:click="vc.goBack()">
                返回
            </button>
        </div>
    </div>
    <!-- 业主信息 -->
    <div class="margin-top">
        <div class="text-center vc-float-left" style="width: 150px;" v-if="ownerDetailInfo.url">
            <image width="120px" height="140px" class="border-radius" v-bind:src="ownerDetailInfo.url" @error="errorLoadImg" />
        </div>
        <div class="text-center vc-float-left" style="width: 150px;" v-else>
            <image width="120px" height="140px" class="border-radius" src="/img/noPhoto.jpg" />
        </div>
        <div class="row" style="min-height: 160px;">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="人员ID：" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{ownerDetailInfo.memberId}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="名称：" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{ownerDetailInfo.name}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="电话：" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">
                                {{ownerDetailInfo.link}}
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                <vc:i18n name="性别:" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{ownerDetailInfo.sex == 0 ? '男' : '女'}}</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="身份证:" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{ownerDetailInfo.idCard}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="家庭住址：" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class="">{{ownerDetailInfo.address}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="col-form-label">
                                    <vc:i18n name="人员类型:" namespace="ownerDetailInfo"></vc:i18n>
                            </label>
                            <label class=""> {{ownerDetailInfo.ownerTypeName}}</label>
                        </div>
                    </div>
                </div>
                <div v-for="(item,index) in ownerDetailInfo.ownerAttrDtos">
                    <div class="row" v-if="index % 4 == 0">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label class="col-form-label">{{item.specName}}：</label>
                                <label class="">{{item.valueName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < ownerDetailInfo.roomAttrDtos.length-1">
                            <div class="form-group">
                                <label class="col-form-label">{{ownerDetailInfo.roomAttrDtos[index+1].specName}}：</label>
                                <label class="">{{ownerDetailInfo.roomAttrDtos[index+1].valueName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < ownerDetailInfo.roomAttrDtos.length-2">
                            <div class="form-group">
                                <label class="col-form-label">{{ownerDetailInfo.roomAttrDtos[index+2].specName}}：</label>
                                <label class="">{{ownerDetailInfo.roomAttrDtos[index+2].valueName}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3" v-if="index < ownerDetailInfo.roomAttrDtos.length-3">
                            <div class="form-group">
                                <label class="col-form-label">{{ownerDetailInfo.roomAttrDtos[index+3].specName}}：</label>
                                <label class="">{{ownerDetailInfo.roomAttrDtos[index+3].valueName}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="vc-line-primary margin-top"></div>
    <div class="margin-top-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailRoom'}" v-on:click="changeTab('ownerDetailRoom')">
                    <vc:i18n name="房屋" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailMember'}" v-on:click="changeTab('ownerDetailMember')">
                    <vc:i18n name="家庭人员" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailCar'}" v-on:click="changeTab('ownerDetailCar')">
                    <vc:i18n name="车辆" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailAccessControlFace'}" v-on:click="changeTab('ownerDetailAccessControlFace')">
                    <vc:i18n name="授权门禁" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailAccessControlLog'}" v-on:click="changeTab('ownerDetailAccessControlLog')">
                    <vc:i18n name="人脸下发" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailAccessControlInout'}" v-on:click="changeTab('ownerDetailAccessControlInout')">
                    <vc:i18n name="门禁开门" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
          
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailLockPerson'}" v-on:click="changeTab('ownerDetailLockPerson')">
                    <vc:i18n name="门锁授权" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailLockLog'}" v-on:click="changeTab('ownerDetailLockLog')">
                    <vc:i18n name="门锁下发" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailLockInout'}" v-on:click="changeTab('ownerDetailLockInout')">
                    <vc:i18n name="门锁进出" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:ownerDetailInfo._currentTab == 'ownerDetailChargeOrder'}" v-on:click="changeTab('ownerDetailChargeOrder')">
                    <vc:i18n name="充电订单" namespace="ownerDetail"></vc:i18n>
                </a>
            </li>
        </ul>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailRoom'">
        <vc:create path="owner/ownerDetailRoom"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailMember'">
        <vc:create path="owner/ownerDetailMember"></vc:create>
    </div>
    
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailCar'">
        <vc:create path="owner/ownerDetailCar"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailAccessControlFace'">
        <vc:create path="owner/ownerDetailAccessControlFace"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailAccessControlLog'">
        <vc:create path="owner/ownerDetailAccessControlLog"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailAccessControlInout'">
        <vc:create path="owner/ownerDetailAccessControlInout"></vc:create>
    </div> 
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailLockPerson'">
        <vc:create path="owner/ownerDetailLockPerson"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailLockLog'">
        <vc:create path="owner/ownerDetailLockLog"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailLockInout'">
        <vc:create path="owner/ownerDetailLockInout"></vc:create>
    </div>
    <div v-if="ownerDetailInfo._currentTab == 'ownerDetailChargeOrder'">
        <vc:create path="owner/ownerDetailChargeOrder"></vc:create>
    </div>
    
    
</div>